<template>
  <div class="scroll-wrap">
      <div class="scroll-con" ref="con">
          <slot></slot>
          <div class="loading">
              <slot name="loading"></slot>
          </div>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
    // scrollX  scrollY  click ：true pullUpLoad：Boolean Object
    props:{
        scrollX:{
            type:Boolean,
            default:false
        },
        scrollY:{
            type:Boolean,
            default:false
        },
        pullUpLoad:{
            type:[Boolean,Object],
            default:false
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.bscroll = new BScroll('.scroll-wrap',{
                scrollX:this.scrollX,
                scrollY:this.scrollY,
                pullUpLoad:this.pullUpLoad,
                click:true,
                probeType:2
            })

            this.bscroll.on('pullingUp',() => {
                if(this.pullUpLoad){
                    console.log("加载下一页的数据")
                    this.$emit('getNextList');
                    this.bscroll.finishPullUp();
                    this.$nextTick(() => {
                        this.bscroll.refresh();
                    })
                }
            })

            setTimeout(() => {
                this.bscroll.refresh();
            },0)
        })

    }
}
</script>

<style lang="scss" scoped>
    .scroll-wrap{
        @include size(100%,100%);
        overflow: hidden;
    }
</style>